<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>事件作业</title>
</head>
<body>
	<!-- 1.按钮和DIV的单击事件（三种绑定方式） -->
	<button type="button" onclick="btnonclick()">按钮1</button>
	<button type="button" id="btn2">按钮2</button>
	<button type="button" id="btn3">按钮3</button>
	<br>
	<div id="div" onclick="divonclick()" style="width: 100px;height: 50px;background-color: #FF0000;">
		div
	</div>
	<div id="div2" style="width: 100px;height: 50px;background-color: aqua;">
		div2
	</div>
	<div id="div3" style="width: 100px;height: 50px;background-color: aquamarine;">
		div3
	</div>


	<!-- 2. 300px*300px的DIV 进入事件，离开事件，移动事件（三种绑定方式） -->
	<div id="div4" style="width: 300px ; height: 300px; background-color: blue "
		 onmouseenter="div4enter()" onmouseleave="div4leave()" onmousemove="div4move()">
		300*300的div
	</div>


	<!-- 3.登入页面
		用户名输入框，
		密码输入框，
		提交按钮 -->
	<form action="" method="post">
		用户名：
		<input type="text" id="username" value="" onfocus="userNameFocus()" onblur="userNameblur()" />
		<br>
		密码：
		<input type="password" id="userpwd" value="" onfocus="userPwdFocus()" onblur="userPwdblur()" />
		<br>
		<button type="submit" id="bbtn" onclick="bbtnonclick()">提交</button>
	</form>



	<!-- 4 -->
	<div id="div5" style="width: 300px ; height: 300px; background-color: yellow " onmousemove="div5move()">
	</div>
	<button type="button" onclick="add()">添加监听器</button>
	<button type="button" onclick="remove()">移除监听器</button>

</body>
<script type="text/javascript">
	function btnonclick() {
		console.log('按钮1被单击')
	}
	document.getElementById('btn2').onclick = function () {
		console.log('按钮2被单击')
	}
	document.getElementById('btn3').addEventListener('click', function () {
		console.log('按钮3被单击')
	})
	function divonclick() {
		console.log('div1被单击')
	}
	document.getElementById('div2').onclick = function () {
		console.log('div2被单击')
	}
	document.getElementById('div3').addEventListener('click', function () {
		console.log('div3被单击')
	})



	function div4enter() {
		document.getElementById('div4').style.backgroundColor = 'red';
		document.getElementById('div4').innerHTML = "进入div";
		console.log('进入div4')
	}
	function div4leave() {
		document.getElementById('div4').style.backgroundColor = 'blue';
		document.getElementById('div4').innerHTML = "300*300的div";
		console.log('离开div4')
	}
	function div4move() {
		console.log('在div4中移动')
	}


	//        3.1 用户名框获取焦点事件，控制台输出：用户在输入名称
	function userNameFocus() {
		console.log('用户在输入名称')
	}
	//        3.2 用户名框失去焦点事件，判断是否有输入文字，没有则alert没有输入用户名
	function userNameblur() {
		console.log('用户停止输入名称')
		var userName = document.getElementById('username')
		if (userName.value == '') {
			alert('没有输入用户名');
			return;
		}
	}
	//        3.3 密码框获取焦点事件，控制台输出：用户在输入密码
	function userPwdFocus() {
		console.log('用户在输入密码')
	}
	//        3.4 密码框失去焦点事件，判断是否有输入文字，没有则alert没有输入密码
	function userPwdblur() {
		console.log('用户停止输入密码')
		var userpwd = document.getElementById('userpwd')
		if (userpwd.value == '') {
			alert('没有输入密码');
			return;
		}
	}
	//        3.5 点击提交按钮，判断用户和密码是否为空。用户名为空，提示‘用户名为空’；
	//            密码为空，提示‘密码为空’；均为空，则提示‘用户名和密码为空’
	function bbtnonclick() {
		var userName = document.getElementById('username')
		var userpwd = document.getElementById('userpwd')
		if (userName.value == '' || userpwd.value == '') {
			alert('用户名和密码为空');
			return;
		} else if (userName.value == '') {
			alert('用户名为空');
			return;
		} else if (userpwd.value == '') {
			alert('密码为空');
			return;
		}
	}

	// 4.实现DIV 鼠标移动事件，采用监听器方式操作，可实现添加和清除监听器功能。
	function div5move() {
		console.log('鼠标移动中')
	}
	function add() {
		document.getElementById('div5').addEventListener('mousemove', div5move)
		alert('监听器添加成功')
	}
	function remove() {
		document.getElementById('div5').removeEventListener('mousemove', div5move)
		alert('监听器移除成功')
	}

</script>
</html>